事件處理(DOM Event)

處理網頁元素事件重要功能，在瀏覽網頁時對 DOM元素 操作，例如點擊、滑動、滾動、輸入等等，而這些操作都會觸發相應事件

事件監聽(listen)

當某個 DOM元素 一個事件處理函式發生時，會執行某個函式或動作

• 一般步驟

  • 選擇監聽 事件DOM元素
  • 使用 addEventListener() 在 DOM元素 事件處理函式
  • 在 事件處理函式 處理事件

<button id="myButton">我的按鈕</button>

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("已經按下去了");
});

按 myButton 時，會觸發 click 事件，handleEvent() 函式會被執行，並顯示一個訊息

事件處理函式(event handler)

• 可以是 匿名函式 和 命名函式
• 匿名函式 直接在 addEventListener() 指定
• 命名函式 需要先定義，在 addEventListener() 指定
• 可以接受一個參數，參數是 事件物件
• 可以返回一個值，為事件返回值
• 事件物件 包含有關事件資訊，例如：事件名稱、發生時間和位置等等

• 一般格式

function handleEvent(event) {
  // 處理事件
}

• addEventListener()

向元素添加事件處理程序

const button = document.querySelector('button');

button.addEventListener('click', function() {
  alert('Hello world');
});

<button id="myButton">Click me</button>

// 添加事件處理程序
document.getElementById("myButton").addEventListener("click", function() {
  // 事件處理程序
  alert("You clicked the button");
});

• removeEventListener

從元素移除事件處理程序

// 移除事件處理程序
document.getElementById("myButton").removeEventListener("click", function() {
  // 事件處理程序
  alert("You clicked the button!");
});

甚至可以執行任何 JavaScript代碼

• 顯示或隱藏元素
• 修改元素屬性
• 彈出警告框或提示框
• 發送HTTP請求
• 執行其他JavaScript代碼

除了 addEventListener() 還提供其他方法來監聽事件，例如：on 屬性和 attachEvent()

DOM事件類型

<button onclick="alert('Hello, world!')">Click me</button>

事件監聽 和 事件處理 是 JavaScript 非常重要一個功能，通過事件處理，可以讓網頁更加互動，並且可以根據使用者操作來響應不同需求

資料來源:JavaScript DOM Event (事件處理)